<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=11">
    <title>登录页</title>
    <link rel="stylesheet" href="/auth/static/css/g-reset.css" />
    <link rel="stylesheet" href="/auth/static/css/login.css" />
    <link rel="shortcut icon" href="#">
    <script src="/auth/static/js/jquery-3.6.0.min.js"></script>
    <script src="/auth/static/js/crypto/crypto-js.js"></script>
    <script language="JavaScript">
        if (window != top) {
            top.location.href = location.href;
        }
    </script>
</head>
<style>
    body {
        background:#000000;
    }
    .container {
        width:150px;
        margin:10px auto 0;
    }
    p {
        font-family:'Audiowide';
        text-align:center;
        color:#0ca4e2;
        font-size:7em;
        -webkit-transition:all 1.5s ease;
        transition:all 1.5s ease;
    }
    p:hover {
        color:#17cfd7;
        -webkit-animation:Glow 1.5s ease infinite alternate;
        animation:Glow 1.5s ease infinite alternate;
    }
    @-webkit-keyframes Glow {
        from {
            text-shadow:0 0 10px #d9cccc,
            0 0 20px #d0c5ce,
            0 0 30px #aba4ae,
            0 0 40px #00a67c,
            0 0 70px #00a67c,
            0 0 80px #00a67c,
            0 0 100px #00a67c,
            0 0 150px #00a67c;
        }
        to {
            text-shadow:0 0 10px #d9cccc,
            0 0 20px #d0c5ce,
            0 0 30px #aba4ae,
            0 0 20px #00a67c,
            0 0 35px #00a67c,
            0 0 40px #00a67c,
            0 0 50px #00a67c,
            0 0 75px #00a67c;
        }
    }
    @keyframes Glow {
        from {
            text-shadow:0 0 10px #d9cccc,
            0 0 20px #d0c5ce,
            0 0 30px #aba4ae,
            0 0 40px #00a67c,
            0 0 70px #00a67c,
            0 0 80px #00a67c,
            0 0 100px #00a67c,
            0 0 150px #00a67c;
        }
        to {
            text-shadow:0 0 10px #d9cccc,
            0 0 20px #d0c5ce,
            0 0 30px #aba4ae,
            0 0 20px #00a67c,
            0 0 35px #00a67c,
            0 0 40px #00a67c,
            0 0 50px #00a67c,
            0 0 75px #00a67c;
        }
    }
    #myInput::-webkit-input-placeholder {
        color:red;
    }
    #myInput:-moz-placeholder {
        color:red;
    }
    #myInput:-ms-input-placeholder {
        color:red;
    }
</style>
<body>
<div class="bg-wrap clearfix">
    <img class="bg" src="/auth/static/images/login/bg.png" alt="" />
    <div class="content-box">

        <div class="filling">
            <!--左侧部分============-->
            <div class="fl left-wrap">
                <div class="filling">
                    <div class="left-wrap-bg">
                        <img class="bg" src="/auth/static/images/login/left-wrap-bg01.png" alt="" width="100%" height="100%"
                             style="border-top-left-radius: 50px;border-bottom-left-radius:50px"/>
                    </div>
                    <div class="left-wrap-bg anim_fade_image">
                        <img class="bg" src="/auth/static/images/login/left-wrap-bg.png" alt="" width="100%" height="100%"
                             style="border-top-left-radius: 50px;border-bottom-left-radius:50px"/>
                    </div>
                </div>
            </div>
            <!--右侧登录部分================-->
            <div class="fr right-wrap">
                <div class="filling">
                    <div class="right-wrap-title">
                        <div class="filling">
                            <img width="100%" src="/auth/static/images/login/login-logo.png" alt="">
                        </div>
                    </div>
                    <div class="login-wrap3">
                        <form id="loginform" class="filling" action="/auth/login" method="post">
                            <div class="input-box clearfix" style="border-radius: 100px;">
                                <img src="/auth/static/images/login/user-icon.png" alt="">
                                <input class="loginUser" name="username" type="text" placeholder="请输入用户名" />
                            </div>
                            <div class="input-box clearfix" style="border-radius: 100px;">
                                <img src="/auth/static/images/login/psw-icon.png" alt="">
                                <input class="loginpwd" name="password" type="password" placeholder="请输入密码" />
                            </div>
                            <div style="margin-top: 7.5%; width: 100%; overflow: hidden;" id="captchadiv">
                                <div class="input-box" style="border-radius: 15px; float: left; width: 60%; margin: 0;">
                                    <input class="captcha" name="captcha" type="text" placeholder="请输入验证码" style="height: 36px" />
                                </div>
                                <div style="width: auto; float: left; margin-left: 10px;">
                                    <#if captchaFrontState == "true">
                                        <a href="javascript:void(0);" title="点击更换验证码">
                                            <img id="verImg" src="/auth/getCaptcha" alt="更换验证码" width="138px" height="40px"
                                                 onclick="refrush(this);">
                                        </a>
                                    </#if>
                                </div>
                            </div>
                            <button id="loginbtn" class="submit-btn" style="border-radius: 100px;" type="submit">登录</button>
                            <span id='errspan' style="color:#b32707;font-size: 80%;margin-left:1%;display: inline-block;"><i><b>${errormsg!''}</b></i></span>
                        </form>
                    </div>
                    <div class="login-wrap3">
                        <div class="container" style="font-size: 0" id="browerdiv">
                            <button id="download" class="submit-btn" &lt;#&ndash;type="submit" &ndash;&gt;
                                    style="color:blue;border: none;font-size:2px;margin-top: 4px;background: none;letter-spacing: 0;border-radius: 15px;
                                    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);">
                                <p>点击下载推荐浏览器</p>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!--右侧登录部分========end========-->
        </div>
    </div>
    <font style="width:100%;text-align:center;position:absolute;left:0;bottom:35px;z-index: 555; color:#fff;font-size:16px;">
        &copy; 国科政信科技（北京）股份有限公司 <br />
        电话:400-150-0216
    </font>
</div>
<script>
    $(function () {
        /**
         * 根据分辨率的大小调整字体的大小
         * */
        styleQ("24px", "20px", "18px", "16px");     //传入参数为 字体尺寸
        $(window).resize(function () {
            styleQ("24px", "20px", "18px", "16px");     //传入参数为 字体尺寸
        });

        /**
         * 根据分辨率的大小调整字体的大小
         * */
        function styleQ(defaultFont, font1, font2, font3) {
            var screenWidth = document.documentElement.clientWidth;
            if (screenWidth <= 1880 && screenWidth > 1560) {
                $(".right-wrap,.left-wrap .filling").css("font-size", font1);
            } else if (screenWidth <= 1560 && screenWidth > 1400) {
                $(".right-wrap,.left-wrap .filling").css("font-size", font2);
            } else if (screenWidth <= 1400) {
                $(".right-wrap,.left-wrap .filling").css("font-size", font3);
            } else {
                $(".right-wrap,.left-wrap .filling").css("font-size", defaultFont);
            }
        }
        // 左侧图片切换
        var isHide = true;
        var time1 = setInterval(function () {
            if (isHide) {
                $('.left-wrap-bg').eq(1).fadeOut(1500)
            } else {
                $('.left-wrap-bg').eq(1).fadeIn(1500)
            }
            isHide = !isHide;
        }, 5000)

        var storage = window.sessionStorage;
        var myform = $("form");
        myform.submit(function () {
            var userName = $('.loginUser').val();
            storage.setItem('userName', userName);
            var flag1 = checkUserName();
            var flag2 = checkPassword();
            var flag3 = checkCaptcha();
            return flag1 && flag2 && flag3;
        });

        var myUserName = storage.getItem('userName');
        var message = "${errormsg!''}";
        if (message != "" && myUserName) {
            $('.loginUser').val(myUserName)
        }
        var captchaFrontStete = '${captchaFrontState}';
        if (captchaFrontStete) {
            document.getElementById("captchadiv").style.display = "block";
            document.getElementById("browerdiv").style.marginTop = "60px";
        } else {
            document.getElementById("captchadiv").style.display = "none";
            document.getElementById("browerdiv").style.marginTop = "0px";
        }

    })

    function refrush() {
        $("#verImg").attr("src", "/auth/getCaptcha?" + Math.random(10));
    }

    function checkUserName() {
        var name = $("input[name='username']");
        var username = name.val();
        if (username == '') {
            name.placeholder = '用户名不能为空';
            $(".loginUser").attr('placeholder', '请输入用户名').attr("id", "myInput");
            $(".loginUser").focus();
            return false;
        }
        return true;
    }

    function checkPassword() {
        var password = $("input[name='password']").val();
        if (password == '') {
            $(".loginpwd").attr('placeholder', '请输入密码').attr("id", "myInput");
            $(".loginpwd").focus(); //取得当前文本框的焦点
            return false;
        }
        return true;
    }

    function checkCaptcha() {
        var captchaFrontStete = '${captchaFrontState}';
        if (captchaFrontStete) {
            var captcha = $("input[name='captcha']").val();
            if (captcha == '') {
                $(".captcha").attr('placeholder', '请输入验证码').attr("id", "myInput");
                $(".captcha").focus(); //取得当前文本框的焦点
                return false;
            }
            return true;
        }
    }

    var oBtn = document.getElementById('loginbtn');
    oBtn.onclick = function () {
        var pass = $("input[name='password']").val();
        if (pass == '') {
            document.getElementById("errspan").innerHTML = '';
            return;
        }
        var data = $("input[name='password']").val();
        var encrypted = getAesString(data);
        var encrypted1 = CryptoJS.enc.Utf8.parse(encrypted);
        $("input[name='password']").val(encrypted);
    };

    var download = document.getElementById('download');
    download.onclick = function () {
        var userAgent = navigator.userAgent.toLowerCase();
        var version = 'Unknown';
        if (userAgent.indexOf('windows nt 5.1') > -1 || userAgent.indexOf('windows nt 5.2') > -1) {
            //win-xp
            version = '1';
        } else {
            //win7+
            version = '2';
        }
        top.location.href = encodeURI("/auth/upload/chrome/download?type=" + version);
    }
</script>
</body>
</html>